import { Tag, message } from 'antd';

export interface Props {
  type?: number | string;
  list?: string[];
  onDelete?: (type: number | string, element: string) => void;
  onEdit?: () => void;
}

/**
 * 已选标签结果
 */
const ResultTags: React.FC<Props> = (props) => {
  const { list, onDelete, type = 1, onEdit } = props;

  return (
    <div>
      {(list || []).map((element: string) => {
        return (
          <Tag
            closable
            onClose={(e: any) => {
              e.preventDefault();
              if (list && list.length === 1) {
                message.error('至少选择一项');
                return;
              }
              if (onDelete) onDelete(type, element);
            }}
            key={element}
            style={{ marginBottom: '8px' }}
          >
            {element}
          </Tag>
        );
      })}
      {onEdit && <a onClick={onEdit}>修改</a>}
    </div>
  );
};

export default ResultTags;
